<template>
	<view class="page">
		<image src="../../static/img/house/addbj.png" class="top_bj" mode="widthFix" @click="hidebox()">

			<view class="nav_top" :style="{height:barHeight.allHeight+'px','background-color':hasBgc}">
				<view class="status-bar" :style="{height:barHeight.statusBarHeight+'px'}"></view>
				<view class="topContent">
					<view v-if="isBack" class="goBack" @click="goBack(backUrl)" hover-class="bgBlack999">
						<image src="../../static/img/house/back.png" mode="heightFix"></image>
					</view>
					<view class="title" :style="{color:color}">{{title}}</view>
				</view>
			</view>
			<view v-if="isHeight" class="marginBox" :style="{height:barHeight.allHeight+'px'}"></view>


			<view class="top" @click="hidebox()">
				<p>我要卖房</p>
				<span>添加后，将获得小区行情解读</span>
			</view>

			<view class="box">

				<view class="box_top">
					<view class="box_top_left" @click="hidebox()">
						<view class="red">*</view>小区
					</view>
					<input type="text" v-model="input_buildName" @input="replaceInput" placeholder="请输入小区名称"
						class="box_top_input" placeholder-class="input_placeholder">
					<view class="buildbox" v-if="show_select">
						<block v-if="temp">
							<p class="err">未查询到数据，请重新输入</p>
						</block>

						<block v-else>
							<block v-for="(item,index) in build" :key="index">
								<p @click="_select_build(item.id,item.buildName)">{{item.buildName}}</p>
							</block>
						</block>

					</view>




					<i class="box_top_ico"></i>

				</view>

				<view class="box_title" @click="hidebox()">
					<view class="red">*</view>楼栋楼层
				</view>

				<view class="box_foot">
					<input type="number" placeholder="请输入" v-model="builtName" @input="builtNamereplaceInput"
						class="box_foot_inputleft"><span>栋</span>
					<input type="number" @click="hidebox()" placeholder="请输入" v-model="unit" @input="unitInput"
						class="box_foot_inputcenter"><span>单元</span>
					<input type="number" @click="hidebox()" placeholder="请输入" v-model="roomNo"
						class="box_foot_inputright"><span class="box_foot_inputr">门牌</span>

					<view class="buildbox builtbox" v-if="show_built">
						<block v-if="temp">
							<p class="err">未查询到数据，请重新输入</p>
						</block>

						<block v-else>
							<block v-for="(item,index) in cbsbc" :key="index">
								<p @click="_select_built(item.id,item.builtName)">{{item.builtName}}</p>
							</block>
						</block>

					</view>
				</view>

				<view class="box_top" @click="hidebox()">
					<view class="red">*</view>
					<view class="name">房屋面积</view>
					<input type="number" v-model="square" placeholder="请输入面积" class="input"
						placeholder-class="input_placeholder">
					<view class="unit">m²</view>
				</view>


				<view class="box_top" @click="hidebox()">
					<view class="red">*</view>
					<view class="name">户型结构</view>

					<picker mode="multiSelector" :range="cityList" :value="cityIndex" @change="bindCityChange"
						class="input">
						<view class="uni-input" v-if="room || hall || toilet">
							{{room?room+'室':''}}
							{{hall?hall+'厅':''}}
							{{toilet?toilet+'卫':''}}
						</view>
						<view class="uni-input input_placeholder" v-else>请选择户型信息</view>
					</picker>
					<i class="ico"></i>
				</view>


				<view class="box_title" @click="hidebox()">
					<view class="red">*</view>装修类型
				</view>

				<view class="tag">
					<span :class="deliveryStandard=='毛坯'?'active':''" @click="_deliveryStandard('毛坯')">毛坯</span>
					<span :class="deliveryStandard=='简装'?'active':''" @click="_deliveryStandard('简装')">简装</span>
					<span :class="deliveryStandard=='清水'?'active':''" @click="_deliveryStandard('清水')">清水</span>
					<span :class="deliveryStandard=='精装'?'active':''" @click="_deliveryStandard('精装')">精装</span>
				</view>




			</view>

			<view class="hidebox" @click="hidebox()"></view>
			<view class="footer" @click="_next()">
				<p>下一步</p>
			</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				sbid: undefined,
				show_built: false,
				built: '',
				deliveryStandard: undefined,
				room: undefined,
				hall: undefined,
				toilet: undefined,
				square: undefined,
				cityIndex: undefined,
				cityList: [
					['请选择几室', 0, 1, 2, 3, 4, 5, 6],
					['请选择几厅', 0, 1, 2, 3, 4, 5, 6],
					['请选择几卫', 0, 1, 2, 3, 4, 5, 6],
				],
				title: '房易云-添加小区',
				hasBgc: 'none',
				color: '#000000;',
				isBack: true,
				backColor: 'none',
				isHeight: true,
				isNavBack: true,
				backUrl: '',
				backNum: 1,
				barHeight: {},
				build: [],
				srid: undefined,
				builtName: undefined,
				unit: undefined,
				roomNo: undefined,
				firstElements: [],
				input_buildName: "",
				show_select: false,
				cbsbc: []
			}
		},
		onLoad(e) {
			let that = this;
			//获取系统信息
			uni.getSystemInfo({
				success(res) {
					let totalTopHeight = 73
					let isTemp = {}
					isTemp['statusBarHeight'] = res.statusBarHeight
					console.log(res.model);
					if (res.model.indexOf('iPhone') == -1) {
						totalTopHeight = 90
						isTemp['statusBarHeight'] = res.statusBarHeight + 60
					} else if (res.model.indexOf('iPhone 5') != -1 || res.model.indexOf('iPhone 6') != -1 || res
						.model.indexOf('iPhone 7') != -1 || res.model.indexOf('iPhone 8') != -1) {
						totalTopHeight = 69
					} else if (res.model.indexOf('iPhone 14') != -1 || res.model.indexOf('iPhone 15') != -1 || res
						.model.indexOf('iPhone 16') != -1 || res.model.indexOf('iPhone 17') != -1) {
						totalTopHeight = 102
						isTemp['statusBarHeight'] = res.statusBarHeight + 60
					} else if (res.model.indexOf('iPhone x') != -1) {
						totalTopHeight = 92
						isTemp['statusBarHeight'] = res.statusBarHeight + 60
					} else {
						totalTopHeight = 96
						isTemp['statusBarHeight'] = res.statusBarHeight + 60
					}


					isTemp['titleBarHeight'] = totalTopHeight - res.statusBarHeight
					isTemp['allHeight'] = totalTopHeight
					that.barHeight = isTemp
					console.log("that.barHeight", totalTopHeight, that.barHeight);
				},
				fail(e) {
					reject(e)
				}
			})
			that._firstElements(5)
		},
		methods: {
			// 装修类型
			_deliveryStandard(e) {
				this.deliveryStandard = e
			},
			// 下拉选择
			bindCityChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.cityIndex = e.target.value
				if (this.cityList[0][this.cityIndex[0]] != '请选择几室') {
					this.room = this.cityList[0][this.cityIndex[0]]
				} else {
					this.room = 0
				}

				if (this.cityList[1][this.cityIndex[1]] != '请选择几厅') {
					this.hall = this.cityList[1][this.cityIndex[1]]
				} else {
					this.hall = 0
				}

				if (this.cityList[2][this.cityIndex[2]] != '请选择几卫') {
					this.toilet = this.cityList[2][this.cityIndex[2]]
				} else {
					this.toilet = 0
				}

			},

			//隐藏下拉
			hidebox() {
				this.show_select = false
				this.show_built = false
			},

			//输入名称	
			replaceInput: function(event) {
				this.srid = undefined
				var value = event.target.value;
				if (value) {
					this._buildName()
				} else {
					this.show_select = false
				}
				console.log("replaceInput");

			},

			//输入楼栋
			builtNamereplaceInput: function(event) {
				console.log("builtNamereplaceInput");
				this.sbid = undefined
				var value = event.target.value;
				if (value) {
					this._builtNameSelect(value)
				} else {
					this.show_built = false
				}
			},

			unitInput: function(event) {
				console.log("unitInput");
				this.sbid = undefined
			},

			_builtNameSelect(name) {
				let that = this
				let temp = []
				let tempjson = that.cbsbc


				tempjson.forEach((e) => {
					let builtName = e.builtName
					if (builtName.indexOf(name) != -1) {
						temp.push(e)
					}
				})
				that.cbsbc = temp
				if (temp.length > 0) {
					this.show_built = true
				} else {
					this.show_built = false
					that.srid = undefined
				}


			},



			// 选择小区
			_select_build(id, name) {
				this.srid = id
				this.input_buildName = name
				this.show_select = false
				this._cbsbc(id)
			},

			// 选择楼栋
			_select_built(id, name) {
				this.sbid = id
				let temp = name
				let index = temp.indexOf("栋");
				let index_builtName = temp.indexOf("单元");

				if (index != -1) {
					let beforeStr = temp.slice(0, index);
					this.builtName = beforeStr
					console.log(beforeStr);
				}

				if (index_builtName != -1) {
					let regex = /栋(\S*?)单元/;
					let match = regex.exec(temp);
					if (match) {
						this.unit = match[1]
					}
				}
				this.show_built = false
			},
			// 返回
			goBack(url) {
				if (this.isNavBack) {
					const that = this
					uni.navigateBack({
						delta: that.backNum
					})
				}
			},

			// 小区列表
			_buildName() {
				let that = this
				let temp = '淮'
				if (!that.input_buildName) {
					temp = '淮'
				} else {
					temp = that.input_buildName
				}

				that.api.get('cbsbi/list?buildName=' + temp + '&pageNum=0&pageSize=1000').then(res => {
					console.log(JSON.parse(res.data));
					let temp = JSON.parse(res.data).content
					console.log("temp", temp.length);
					if (temp.length > 0) {
						that.build = temp
						that.show_select = true
					} else {
						that.build = undefined
						that.show_select = false
						that.srid = undefined
					}



				})
			},


			// 楼栋号
			_cbsbc(e) {
				console.log(e);
				let that = this
				that.cbsbc = []
				that.sbid = undefined
				that.builtName = ""
				that.unit = ""
				that.api.get('cbsbc/simp/' + e).then(res => {
					let temp = JSON.parse(res.data)
					if (temp.length > 0) {
						that.cbsbc = temp
					}
					console.log("res", temp);

				})
			},

			// 获取前面几个
			_firstElements(i) {
				let that = this
				that.api.get('cbsbi/list?buildName=' + '淮' + '&pageNum=0&pageSize=50&isHot=1').then(res => {
					let temp = JSON.parse(res.data).content
					let firstFiveElements = temp.slice(0, i);
					that.firstElements = firstFiveElements
					console.log(firstFiveElements);
				})
			},

			// 跳页
			_navigateTo(e) {
				console.log(e);
				uni.navigateTo({
					url: e
				});
			},

			_next() {
				if (!this.input_buildName) {
					uni.showToast({
						title: "请输入小区",
						icon: 'none'
					})
					return
				}
				if (!this.builtName) {
					uni.showToast({
						title: "请输入楼栋",
						icon: 'none'
					})
					return
				}

				if (!this.unit) {
					uni.showToast({
						title: "请输入单元",
						icon: 'none'
					})
					return
				}
				if (!this.roomNo) {
					uni.showToast({
						title: "请输入门牌号",
						icon: 'none'
					})
					return
				}
				if (!this.square) {
					uni.showToast({
						title: "请输入面积",
						icon: 'none'
					})
					return
				}

				if (!this.room) {
					uni.showToast({
						title: "请选择户型信息",
						icon: 'none'
					})
					return
				}

				if (!this.deliveryStandard) {
					uni.showToast({
						title: "请选择装修类型",
						icon: 'none'
					})
					return
				}

				this._navigateTo(
					`/pages/seller/rate?builtName=${this.builtName}&roomNo=${this.roomNo}&unit=${this.unit}&srid=${this.srid}&square=${this.square}&room=${this.room}&hall=${this.hall}&toilet=${this.toilet}&deliveryStandard=${this.deliveryStandard}&sbid=${this.sbid}&buildName=${this.input_buildName}`
					)

			},

		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}

	.box_top_left {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
		margin: 0 124rpx 0 0;
	}

	.box_top_input {
		width: 430rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
		margin: 0 0 0 0;
	}

	.box_top_ico {
		width: 10rpx;
		height: 16rpx;
		display: inline-block;
		float: right;
		margin: 15rpx 0 0 0;
		background: url(../../static/img/house/addico.png) no-repeat;
		background-size: 100%;
	}



	.box_top_right {
		width: 458rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
		margin: 0 0 0 0;
	}




	.box_top {
		width: 638rpx;
		height: auto;
		margin: 38rpx 24rpx 0;
		display: block;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #000000;
		line-height: 40rpx;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid rgba(190, 190, 190, 0.5);
		position: relative;
	}

	.buildbox {
		width: 450rpx;
		height: auto;
		max-height: 500rpx;
		overflow: auto;
		position: absolute;
		left: 150rpx;
		top: 80rpx;
		background: #fff;
		border-radius: 5rpx;
		z-index: 3;
	}

	.builtbox {
		width: 450rpx;
		height: auto;
		max-height: 500rpx;
		overflow: auto;
		position: absolute;
		left: 0rpx;
		top: 80rpx;
		background: #fff;
		border-radius: 5rpx;
		z-index: 3;
	}


	.buildbox p {
		width: 450rpx;
		height: auto;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #000000;
		line-height: 40rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.buildbox p.err {
		color: #FE5700;
	}

	.box_foot {
		width: 638rpx;
		height: auto;
		margin: 0 24rpx 6rpx;
		display: block;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #000000;
		line-height: 40rpx;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid rgba(190, 190, 190, 0.5);
		position: relative;
	}


	.box_foot_inputleft {
		width: 140rpx;
		height: 40rpx;
		margin: 0 0 0;
		display: block;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #000000;
		line-height: 40rpx;
		min-height: 0;
	}


	.box_foot_inputcenter {
		width: 140rpx;
		height: 40rpx;
		margin: 0 0 0;
		display: block;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #000000;
		line-height: 40rpx;
		margin: 0 0 0 30rpx;
		min-height: 0;
	}

	.box_foot span {
		width: auto;
		height: 40rpx;
		margin: 0 0 0;
		display: block;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #000000;
		line-height: 40rpx;
	}

	.box_foot_inputright {
		width: 140rpx;
		height: 40rpx;
		margin: 0 0 0 80rpx;
		display: block;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #000000;
		line-height: 40rpx;
		margin: 0 0 0 30rpx;
		min-height: 0;
	}
	
	.box_foot_inputr{float: right !important;}

	.box_title {
		width: 638rpx;
		height: auto;
		margin: 32rpx 24rpx 28rpx;
		float: left;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
	}


	.tag {
		width: 662rpx;
		padding: 0 0 0;
		height: auto;
		display: block;
		float: left;
		margin: 0 0 16rpx 24rpx;
	}

	.tag span {
		width: auto;
		height: 80rpx;
		background: #F6F6F6;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		padding: 0 53rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 80rpx;
		margin: 0 16rpx 16rpx 0;
		display: block;
		float: left;
		min-width: 98rpx;
		text-align: center;
	}

	.tag span.active {
		background: rgba(254, 87, 0, 0.05);
		color: #FE5700;
		font-weight: bold;
	}



	.top {
		width: 686rpx;
		height: auto;
		margin: 40rpx 0 0 32rpx;
		float: left;
		position: relative;
		z-index: 2;
	}

	.top p {
		width: 686rpx;
		height: 68rpx;
		font-size: 60rpx;
		/* 		font-family: FZDaHei-B02S-Regular, FZDaHei-B02S;
		font-weight: bold; */
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		line-height: 68rpx;
		margin: 0 0 2rpx 0;
		display: block;
		float: left;
	}

	.top span {
		width: 686rpx;
		height: 40rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		margin: 10rpx 0 2rpx 0;
		display: block;
		float: left;
	}

	.box {
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		margin: 50rpx 0 0 32rpx;
		float: left;
		position: relative;
		z-index: 2;
	}


	.footer {
		width: 100%;
		height: 156rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(255, 131, 14, 0.2);
		opacity: 1;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.footer p {
		width: 686rpx;
		height: 100rpx;
		background: #FE5700;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		margin: 12rpx 0 0 32rpx;
		;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}


	.top_bj1 {
		width: 90%;
		height: 3000rpx;
		display: block;
		float: left;
		z-index: 1;
		position: relative
	}

	.top_bj {
		width: 100vw;
		height: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.nav_top {
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 900;
		display: flex;
		flex-direction: column;
	}

	.topContent {
		width: 100vw;
		height: 100upx;
		position: relative;


	}

	.goBack {
		position: absolute;
		top: 0;
		left: 0;
		width: 10vw;
		height: 100upx;
		display: flex;
		align-items: center;
		padding-left: 20upx;
		box-sizing: border-box;

	}

	.goBack image {
		width: 34rpx;
		height: 34rpx;
	}

	.nav_top .title {
		text-align: center;
		width: 100%;
		height: 100%;
		line-height: 100upx;
		font-size: 40upx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.red {
		width: auto;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FF0000;
		line-height: 40rpx;
		display: block;
		float: left;
		margin: 0 0 0 -10rpx;
	}

	.input {
		width: 400rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000;
		line-height: 40rpx;
		display: block;
		float: left;
	}

	.unit {
		width: 38rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: right;
	}

	.input_placeholder {
		color: #BEBEBE;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
	}

	.name {
		width: 180rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 40rpx;
		display: block;
		float: left;
	}


	page {
		overflow: hidden;
	}

	.hidebox {
		width: 100%;
		height: 700rpx;
		display: block;
		float: left;
		position: relative;
		z-index: 0;
	}
</style>